<template>
    <!-- 搜索 -->
    <el-select @clear="clearSearchKey" v-model="searchKey" filterable remote placeholder="Please enter a keyword"
        :remote-method="remoteMethod" :loading="searchLoading" @change="searchChange" clearable>
        <el-option v-for="item in searchOptions" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
    <!-- 添加按钮 -->
    <el-button type="primary" @click="addStu">添加项目</el-button>
    <!-- 表格 -->
    <div class="table">
        <el-table :data="tableData" border style="width: 100%" v-loading="tableLoading">
            <el-table-column prop="headimgurl" label="头像" align="center">
                <template v-slot="{ row }">

                    <el-avatar shape="square" :src="row.headimgurl" />
                </template>

            </el-table-column>
            <el-table-column prop="name" label="姓名" align="center" />
            <el-table-column prop="degree" label="学历" align="center" />
            <el-table-column prop="class" label="班级" align="center" />
            <el-table-column prop="projectUrl" label="项目" align="center" />
            <el-table-column prop="cTime" label="创建时间" align="center" />
            <el-table-column prop="operation" label="操作" align="center">
                <template v-slot="{ row }">
                    <el-button type="primary" :icon="Edit" circle @click="edit(row)" />
                    <el-button type="warning" :icon="View" circle />
                    <el-button type="danger" :icon="Delete" circle @click="del(row)" />
                </template>
            </el-table-column>


        </el-table>
    </div>
    <!-- 分页 -->
    <div class="pageNataion">
        <el-pagination @current-change="pageChange" background layout="prev, pager, next" :total="total"
            :page-size="pageSize" :current-page="currentPage" />
    </div>
    <!-- 引入dialog组件 -->
    <dialogCom :title="dialogTitle" @validateSuccess="dialogValidateSuccess" @dialogCancel="dialogCancel"
        :dialogFormData="dialogFormData" :visible="dialogVisible" @closed="close">
        <template v-slot:upload>
            <el-upload v-loading="updataLoading" class="avatar-uploader" method="post"
                action="/api//students/uploadStuAvatar" name="headimgurl" :show-file-list="false"
                :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                </el-icon>
            </el-upload>
        </template>

    </dialogCom>
</template>
<script setup>
// 引入dialog组件
import dialogCom from "@/components/dialog/index.vue"
import { Plus } from '@element-plus/icons-vue'
import {

    Delete,
    Edit,

    View
} from '@element-plus/icons-vue'
import { ref, onMounted, reactive } from "vue"

import { ElMessage, ElMessageBox } from "element-plus"

// 引入api
import * as api from "@/api/stu.js"


// 搜索逻辑
//搜索的数据
let searchOptions = ref([])
// 搜索关键字
let searchKey = ref("")
// 搜索加载动画
let searchLoading = ref(false)
// 搜索框输入之后触发的方法 ,这里负责的呈现搜索的联想数据
let remoteMethod = async (currentKey) => {
    if (!currentKey) {
        return
    }
    // console.log(currentKey)

    searchLoading.value = true
    // 这个三元的目的是为了保证用户在输入或者在选择的时候能获取到搜索的关键字
    // let key =searchKey.value? searchKey.value:currentKey
    try {
        // 要搜索全部的数据所以传递空字符count,默认搜索全部
        let res = await api.seachStuListApi(currentKey, '')
        //给联想的列表进行赋值操作
        let repeatDatas = res.data.data.map((item) => ({ value: item.name }))
        //    要去重操作
        let norepeatDatas = [];
        for (var i = 0; i < repeatDatas.length; i++) {
            // 声明一个开关
            let flag = true;
            for (var j = 0; j < norepeatDatas.length; j++) {
                if (repeatDatas[i].value == norepeatDatas[j].value) {
                    flag = false;
                    break;
                }
            }
            if (flag) {
                norepeatDatas.unshift(repeatDatas[i])
            }
        }


        // 去重之后对options进行赋值
        searchOptions.value = norepeatDatas
        searchLoading.value = false;

    } catch (e) {
        console.log(e)
        searchLoading.value = false;
    }
}

// 清空关键字之后的方法
let clearSearchKey = () => {
    // 初始化数据，让页码重新回到第一页
    currentPage.value = 1

}


// 用户选择了输入框的值之后，负责更新表格的数据
let searchChange = async (key, page = 1, count = 10) => {

    // 获取用户点选的值
    // 打开表格的动画
    tableLoading.value = true
    // 清空上次获取到的选项
    searchOptions.value = []
    try {
        let res = await api.seachStuListApi(searchKey.value, count, page)
        // 对表格数据进行操作
        tableData.value = res.data.data;
        tableLoading.value = false;
        // 对搜索的数据进行分页
        setPageNation(res.data.total)
    } catch (e) {
        console.log(e)
        tableLoading.value = false;
    }
}



// 表格数据
let tableData = ref([])
// 加载动画
let tableLoading = ref(true)

let getstuList = async (page, count, classes) => {
    // 开启加载动画
    tableLoading.value = true
    try {
        // 请求列表数据
        let res = await api.getStulistApi(page, count, classes)
        console.log(res)
        // 给表格数据赋值
        tableData.value = res.data.data
        // 关闭加载动画
        tableLoading.value = false

        //设置分页器的数量
        setPageNation(res.data.total)
        // console.log(setPageNation)

    } catch (e) {
        console.log(e)
        // 关闭加载动画
        tableLoading.value = false
    }

}

// 处理分页器
// 分页器的total属性
let total = ref(1)
//一页展示多少条
let pageSize = ref(10)
//默认的页码
let currentPage = ref(1)

// 页码变更的时候
let pageChange = (inputCurrentPage) => {
    // console.log(current)
    // 动态变更页码
    currentPage.value = inputCurrentPage
    // 判断有没有搜索关键字，如果有那么应该更新搜索的分页结果
    if (searchKey.value) {
        searchChange(null, inputCurrentPage)
    } else {
        // 不然才是拉取列表全部的数据
        getstuList(inputCurrentPage)
    }

}

// 专门修改分页器内容的方法
let setPageNation = (totalCount = 10, count = 10, currentPage = 1) => {
    total.value = totalCount
    pageSize.value = count

}

// 添加stu信息
// 声明dialogvisible控制dialog
// dialog标题
let dialogVisible = ref(false)
let dialogTitle = ref('增加数据')
let addStu = () => {
    // 打开dialog
    dialogVisible.value = true
    dialogTitle.value = '增加数据'

}

// dialog的数据源
let dialogFormData = reactive({
    class: {
        label: "班级",
        value: ""
    },
    name: {
        label: "姓名",
        value: ""
    },
    age: {
        label: "年龄",
        value: ""
    },
    city: {
        label: "城市",
        value: ""
    },
    degree: {
        label: "学历",
        value: ""
    },
    productUrl: {
        label: "项目地址",
        value: ""
    },
    description: {
        label: "描述",
        value: ""
    }
})


//dialog点击了确定按钮，并且表单校验通过触发的逻辑
let dialogValidateSuccess = async (form) => {
    // console.log(valid)
    // 发起请求 将输入的内容传递给服务器

    let message = '添加成功'
    let params = {
        headimgurl: "",
        class: dialogFormData.class.value,
        name: dialogFormData.name.value,
        age: dialogFormData.age.value,
        city: dialogFormData.age.value,
        degree: dialogFormData.degree.value,
        productUrl: dialogFormData.productUrl.value,
        description: dialogFormData.description.value
    }
    try {
        let apiMethod = null;
        switch (dialogTitle.value) {
            case '增加数据':
                apiMethod = api.addStuApi;
                // 删除sid这条属性
                params.sId ? delete params.sId : ""
                break;
            case '编辑数据':
                apiMethod = api.updateApi;
                // 给params中添加sId属性
                params.sId = sId.value
                message = '修改成功'
        }
        // 判断是否上传头像，如果上传了，那么携带到params中去
        params.headimgurl = headimgurl.value ? headimgurl.value : ''

        let res = await apiMethod(params)
        // 添加成功
        // 1.提示添加成功
        ElMessage({
            type: 'success',
            message
        })
        // 2.关掉dialog
        dialogVisible.value = false
        // console.log(res)
        // 3.清空列表
        form.value.resetFields()
        // 4.更新列表
        getstuList()

    } catch (e) {
        ElMessage({
            type: 'error',
            message: e.toString()
        })
        console.log(e)
    }

}

// 表单取消
let dialogCancel = () => {
    console.log("已经取消")
    dialogVisible.value = false;
}
// dialog关闭之后，要同步关闭属性的值
let close = () => {
    dialogVisible.value = false
    //将数据清空
    let keys = Object.keys(dialogFormData);
    keys.forEach(key => {
        // 将dialogFormData里面的value清空
        dialogFormData[key].value = ''
    })
    // 清空头像
    imageUrl.value = ''
}

// 编辑
// 声明一个变量，储存sid,便于编辑的时候传递给后端
let sId = ref('')
let edit = (row) => {
    // 1.打开dialog
    dialogVisible.value = true
    console.log(row)
    // 2.修改标题
    dialogTitle.value = '编辑数据'

    // 3.数据需要回显
    let keys = Object.keys(dialogFormData)
    keys.forEach(key => {
        dialogFormData[key].value = row[key]
    })
    // 给sid赋值
    sId.value = row.sId
    // 更改全局的headimgurl这个字段，便于数据的传递
    headimgurl.value = row.headimgurl
    // 回显
    imageUrl.value = row.headimgurl


}

// 上传文件
// 一个保存上传地址的变量
let imageUrl = ref()

// 声明一个headimgurl变量，用于将参数在表单dialog通过的时候，一并提交给后台
let headimgurl = ref('')
// 上传动画
let updataLoading = ref(false)

// 上传成功的方法
let handleAvatarSuccess = (res, uploadFile) => {
    if (res.state) {
        // 头像上传成功
        ElMessage({
            type: 'success',
            message: res.msg
        })
        headimgurl.value = res.headimgurl
    } else {
        ElMessage({
            type: 'error',
            message: res.msg
        })
    }

    // 关闭loading动画
    updataLoading.value = false
    // console.log(res)
    // console.log(uploadFile.raw)
    imageUrl.value = URL.createObjectURL(uploadFile.raw)
}
// 上传之前
let beforeAvatarUpload = (rawFile) => {
    console.log(rawFile.type)
    // 允许上传的文件类型
    let acceptType = ['image/jpeg', 'image/png']
    // 判断当前上传的文件类型是不是包含在上面的数组中
    let isAccept = acceptType.includes(rawFile.type)
    if (!isAccept) {
        ElMessage.error("上传的文件类型只能是jpeg或者是png.您当前上传的文件类型是" + rawFile.type)
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('上传的文件不能超过1M')
        return false
    }
    updataLoading.value = true
    return true

}





// 删除
let del = (row) => {
    // 获取当前这条数据的id 传递给后台就可以了
    // 1.交互，让用户确认是否删除
    ElMessageBox.confirm('此操作将永久删除' +row.name+ ', 是否继续？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(async () => {
            // 2.发送请求，删除数据
            try {
                let res = await api.delStuApi(row.sId)
                ElMessage({
                    type: "success",
                    message: '删除成功'
                })
                // 更新列表
                getstuList()
            } catch (e) {
                // console.log(e)
                ElMessage({
                    type:'error',
                    message:e.toString() 
                })

            }
        })
        .catch(() => {
            ElMessage({
                type: 'warning',
                message: '已取消删除',
            })
        })

}



onMounted(() => {
    getstuList()
})


</script>
<script>
export default {
    meta: {
        title: 'xyxmgl',
        name: '学员项目管理',
        icon: "icon-shangpinguanli"
    }
}


</script>
<style lang="less" scoped>
.table {
    margin-top: 50px;
}

.el-table--border th.el-table__cell {
    text-align: center;
}



.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>